<template>
    <div class="article-card" style="margin-bottom: 10px;">
        <div class="article-card-img">
            <img :src="`http://127.0.0.1:7001/public${articleItem.main_img}`" alt="">
        </div>
        <div class="article-card-msg">
            <h2>{{articleItem.title}}</h2>
            <div class="">
                <n-tag v-for="(item,index) in articleItem.tagsName" :key="index" type="info" class=" mr10 mt10" style="display: inline-block;line-height: 30px;">{{item}}</n-tag>
            </div>
            <div class=" mt10">
                <myTopicCard v-for="(item,index) in articleItem.topicName" :key="index">{{item}}</myTopicCard>
            </div>
            <p class="mt10" v-html="articleItem.content"></p>
            <div class="flex mt10" style="justify-content: end;">
                {{articleItem.create_time}}
            </div>
            <div class="flex mt10" style="justify-content: end;">
                <div class="flex mr10">
                    <svg-icon iconName="icon-liulan" className="article-icon"></svg-icon><span>{{articleItem.view_count}}</span>
                </div>
                <div class="flex mr10">
                    <svg-icon iconName="icon-dianzan" className="article-icon"></svg-icon><span>{{articleItem.like_count}}</span>
                </div>
                <div class="flex">
                    <svg-icon iconName="icon-lvsefenkaicankaoxianban-" className="article-icon"></svg-icon><span>{{articleItem.collect_count}}</span>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
    const props = defineProps({
        articleItem:Object
    })
    
</script>

<style lang="scss" scoped>
    .article-card{
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    transition: all .5s;
     &:hover{
        transform: scale(1.05);
        background: $color3;
        border-radius: 10px;
     }
     &-img{
        margin-right: 20px;
        width: 280px;
        height: 210px;   
        border-left: 4px solid $color3;
        border-radius: 10px;  
        img{
        border: 1px #f2f2f2 solid;  
        border-radius: 10px;  
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
    }
    &-msg{
        display: flex;
        flex-direction: column;
        flex: 1;
         
         p{
            color: #ccc;
            font-size: 14px;
            flex: 1;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;/*重点，不能用block等其他*/
            -webkit-line-clamp: 2;/*重点IE和火狐不支持*/
            -webkit-box-orient: vertical;/*重点*/
         }
    }
}
.article-icon{
    width: 20px;
    height: 20px;
    margin-right: 6px;
}
</style>